<template lang="pug">
  el-row(style="width:100%;height:100%")
    el-col(:span="24", style="width:100%;height:100%" )
      div.grid-content.red-list(style="width:100%;height:100%")
        .library-title 员工账号
          span 共3条
        .library-filter
          el-select(v-model="status", placeholder="账号状态", style="width:250px;margin-right:20px")
            el-option(label="全部", value="1")
            el-option(label="已启动", value="2")
            el-option(label="已停用", value="3")
          el-button.el-table__fixed-right 新增员工账号
        .library-date
          el-table(:data="tableData", :stripe="true", :border="false", style="width: 100%")
            el-table-column(prop="id", label="", width="65")
            el-table-column(prop="phone", label="登录手机号", width="320")
            el-table-column(prop="username", label="用户名", width="320")
            el-table-column(prop="status", label="账号状态", width="320")
            el-table-column(label="操作", width="470", class-name="operate")
              template(slot-scope="scope")
                .el-icon-circle-close-outline.icon 删除
                .el-icon-remove-outline.icon 编辑
                .el-icon-edit-outline.icon 编辑
        .library-pagination
          el-pagination(@size-change="paginationHandleSizeChange", @current-change="paginationHandleCurrentChange", :current-page.sync="currentPage", :page-sizes="[20, 40, 60, 80]", :page-size="100", layout="sizes, prev, pager, next", :total="1000")
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        status: '',
        date1: '',
        date2: '',
        tableData: [{
          id: '1',
          phone: '18516289561',
          username: 'jixiaopeng',
          status:  '已启用  '
        },{
          id: '2',
          phone: '18516289561',
          username: 'jixiaopeng',
          status:  '已启用  '
        },{
          id: '3',
          phone: '18516289561',
          username: 'jixiaopeng',
          status:  '已启用  '
        },{
          id: '4',
          phone: '18516289561',
          username: 'jixiaopeng',
          status:  '已启用  '
        }],
        currentPage: 5
      }
    },
    mounted: function () {
      this.$nextTick(() => {
        // 将内容页高度设置100%
        const orderHeight = document.documentElement.clientHeight - 80;
        document.querySelector('.el-main').style.height = orderHeight + 'px';
        document.querySelector('.el-main').style.background = '#fff';
      });
    },
    methods: {
      paginationHandleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      paginationHandleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style lang="scss">
  .red-list {
    position: relative;
    height: 100%;
    .library-title {
      font-size: 18px;
      font-weight: 800;
      span {
        font-size: 13px;
        color: #999;
        font-weight: 500;
        margin-left: 20px;
      }
    }
    .library-content {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 1px #eee solid;
      width: 60%;
      padding: 20px 0;
      .el-col {
        border-right: 1px solid #ddd;
        &:last-child {
          border-right: none;
        }
      }
      .grid-content {
        text-align: center;
        .title {
          font-size: 12px;
          color: #999;
        }
        .value {
          font-size: 30px;
          color: $main-style-red;
        }
      }
    }
    .library-filter {
      position: relative;
      margin-top: 20px;
      .el-table__fixed-right {
        right: 20px;
        background-color: $main-style-red;
        color: #fff;
      }
    }
    .library-date {
      margin-top: 20px;
      td, th {
        border: 1px solid #ebeef5;
      }
      .operate {
        .icon {
          margin: 0 20px;
          cursor: pointer;
          color: $main-style-red;
          &:before {
            margin-right: 5px;
          }
        }
      }
    }
    .library-pagination {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      margin: 0 auto;
      text-align: center;
    }
  }
</style>
